
<ion-header class="home-header">
  <ion-navbar text-center style="background-color: white;padding: 0">
    <img src="../assets/imgs/navbar_logo@2x.png" alt="" style="width: 30%">
    <img src="../assets/imgs/navbar_icon_add_default@2x.png" alt=""  class="add-btn">
  </ion-navbar>
</ion-header>

<ion-content style="background-color: #F0F0F0;padding: 0">
  <div style="align-content: center;white-space:nowrap;background-color: white">
    <div *ngFor="let room of room_list index as i" class="device-tab-div" >
      <button ion-button  clear  (click)="choose_room(i)" class="device-tab-button" [class.button-choosed]="room_list.indexOf(choosed_room) == i">{{room}}</button>
    </div>
  </div>
  <div  *ngIf="rooms.length > 6" class="more-room-btn"  (click)="all_room()">
    <img src="../assets/imgs/toptabbar_icon_more_default@2x.png" alt="" style="width: 100%;">
  </div>

  <ion-grid>
        <ion-row >
          <ion-col col-4  *ngFor="let scene of scene_list index as j" class="device-col">
            <ion-card class="device-card" (click)="take_on_off(j)">
              <ion-card-content class="device-card-content" >
                <span class="switch-dot"  [class.on]="scene.state != 0" [class.off]="scene.state == 0">•</span>
                <!--故障时可以亮黄灯-->
                <!--<img [src]="../assets/imgs/" + scene_icon_shower@2x.png" class="device-img" >-->
                <img *ngIf="scene.icon != 'scene_default'" src="../assets/imgs/{{scene.icon}}@2x.png" class="device-img" >
                <img *ngIf="scene.icon == 'scene_default'" src="../assets/imgs/scene_icon_offwork@2x.png" class="device-img" >
              </ion-card-content>
            </ion-card>
            <p class="device-name">{{scene.name}}</p>
          </ion-col>
        </ion-row>
      </ion-grid>
</ion-content>
